<template>
  <!-- 成绩分析可视化 -->
  <div class="main">
    <div class="flex items-center mb-4 h-12">
      <choosect ref="chooseCT" />
      <el-button icon="el-icon-upload2" class="ml-4" type="primary" plain
        @click="chooseCT=$refs.chooseCT.getVS();"
      >提交</el-button>
      <el-button icon="el-icon-delete" class="ml-4" type="warning" plain
        @click="refresh"
      >清空</el-button>
    </div>
    <div class="content" v-if="chooseCT">
      <div class="flex mb-5">
        <chartScatter
          id="ctaa1"
          style="width:70vw;height: 30vw;"
          xname="等级"
          yname="名次"
          :chartdata="
          new Array(80).fill(undefined).map((e,i)=>{
            const x = 40 + Math.ceil(Math.random() * 40)
            return {
              name:'参赛者'+i,
              value:[x,40 - Math.ceil(Math.random() * 32) + x/2]
            }
          })"
          title="散点图-等级x名次"
        />
        <el-card style="width: calc(100% - 70vw - 5px);">
          等级和名次的关系
        </el-card>
      </div>
      <div class="flex mb-5">
        <el-card style="width: calc(100% - 70vw - 5px);">
          性别、年龄和名次的关系
        </el-card>
        <chart-scatter2
          id="ctaa2"
          style="width:70vw;height: 50vw;"
          title="散点图-年龄x名次 - 性别"
        />
      </div>
      <el-table
        :data="[{
            date: '冠军',
            name: '18-20',
            address: '男',
            d:'射手座',
            e:'广东-广州'
          }, {
            date: '亚军',
            name: '16-18',
            address: '女',
            d:'天秤座',
            e:'山东-济南'
          }, {
            date: '季军',
            name: '22-24',
            address: '-',
            d:'金牛座',
            e:'江苏-南京'
          }]"
        style="width: 100%"
      >
        <el-table-column
          prop="date"
          width="180"
        >
          <el-tag slot="header" slot-scope="scope">高质量选手附带属性</el-tag>
        </el-table-column>
        <el-table-column
          prop="e"
          label="地区">
        </el-table-column>
        <el-table-column
          prop="name"
          label="年龄段"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="d"
          label="星座">
        </el-table-column>
      </el-table>
    </div>
    <div class="content flex text-4xl" v-else>
      <span class="m-auto">
        NULL - 请选择赛事并提交...
      </span>
    </div>
  </div>
</template>

<script>
import choosect from './modules/chooseCT.vue'
import chartScatter from './modules/scatter.vue'
import chartScatter2 from './modules/scattertwo.vue'
export default {
  name: 'AchievementAnalysis',
  components: { choosect,chartScatter,chartScatter2 },
  data() {
    return {
      chooseCT: false,//false,
    }
  },
  watch: {},
  created() {},
  mounted() {
    window.addEventListener('resize', this.resizeChart)
  },
  methods: {
    resizeChart() {
      console.log("resize")
    },
    refresh() {
      this.chooseCT = this.$refs.chooseCT.getVS()
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.resizeChart)
  }
}
</script>
<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
  .content {
    height: calc(100% - 1rem - 3rem);
    overflow-y: scroll;
  }
}
</style>